<template>
  <div>
    <el-dialog :title="isok ? '编辑部门' : '新增部门'" :visible="dialogFormVisible" @close="cancelFn">
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="部门名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.name" autocomplete="off" style="width: 80%;" placeholder="1-50个字符" />
        </el-form-item>
        <el-form-item label="部门编码" :label-width="formLabelWidth" prop="code">
          <el-input v-model="form.code" style="width: 80%;" placeholder="1-50个字符" />
        </el-form-item>
        <el-form-item label="部门负责人" :label-width="formLabelWidth" prop="manager">
          <el-select v-model="form.manager" placeholder="请选择活动区域" style="width: 80%;">
            <template v-for="item in managers">
              <el-option :key="item.id" :label="item.username" :value="item.username" />
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="部门介绍" :label-width="formLabelWidth" prop="introduce">
          <el-input v-model="form.introduce" type="textarea" style="width: 80%;" placeholder="1-300个字符" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelFn">取 消</el-button>
        <el-button type="primary" @click="submitFormFn">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { adddepartmentAPI, getDepartmentsAPI, simpleAPI, getdepartmentAPI, alertdepartmentAPI } from '@/api/treetools'
export default {
  data() {
    const validaNameFn = async(rule, value, callback) => {
      let isref = false
      const { depts } = await getDepartmentsAPI()
      if (!this.isok) {
        // 新增部门下
        isref = depts.filter(item => item.pid === this.treeNode.id).some(item => item.name === value)
      } else {
        // 编辑部门下
        isref = depts.filter(item => item.pid === this.treeNode.pid && item.id !== this.treeNode.id).some(item => item.name === value)
      }
      isref ? callback(new Error(`当前部门下已经有${value}部门了`)) : callback()
    }
    const validaCodeFn = async(rule, value, callback) => {
      let isref = false
      const { depts } = await getDepartmentsAPI()
      if (!this.isok) {
        // 新增部门下
        isref = depts.some(item => item.code === value && value)
      } else {
        // 编辑部门下
        isref = depts.some(item => item.code === value && item.id !== this.treeNode.id)
      }
      isref ? callback(new Error(`页码已经有${value}编码了`)) : callback()
    }

    return {
      dialogFormVisible: false, // 对话框变量
      form: { // 表单对象

      },
      managers: [], // 负责人列表数组
      treeNode: {},
      formLabelWidth: '120px',
      isok: false, // 编辑和添加的布尔值
      rules: {
        name: [
          { required: true, message: '请输入部门名称1-50个字符', trigger: 'blur' },
          { min: 1, max: 50, message: '部门名称不能为空', trigger: 'blur' },
          { validator: validaNameFn, trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入部门编码1-50个字符', trigger: 'blur' },
          { min: 1, max: 50, message: '部门编码不能为空', trigger: 'blur' },
          { validator: validaCodeFn, trigger: 'blur' }
        ],
        manager: [
          { required: true, message: '请输入部门负责人', trigger: 'blur' }
        ],
        introduce: [
          { required: true, message: '请输入部门介绍1-300个字符', trigger: 'blur' },
          { min: 1, max: 50, message: '部门介绍不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  async created() {
    const res = await simpleAPI()
    this.managers = res
  },
  mounted() {
    this.$bus.$on('addFn', (data, isok) => { // 添加新部门
      this.getcompanyFn(isok, data)
    })
    this.$bus.$on('setFn', async(data, isok) => { // 编辑部门
      // 发起请求
      this.form = await getdepartmentAPI(data.id)
      this.getcompanyFn(isok, data)
    })
  },
  methods: {
    getcompanyFn(isok, data) {
      this.dialogFormVisible = true // 开启对话框
      this.isok = isok // 把第二个参数赋值给 我们确定变量
      this.treeNode = data // 把数据存储起来
      // 把获取过来的 父级部门id追加给 我们的from对象
    },
    submitFormFn() { // 表单的提交事件
      this.$refs.form.validate(async(vaild) => {
        if (vaild) { // 如果校验成功 执行下面代码
          if (!this.isok) {
            // 发起后端请求
            console.log(22)
            await adddepartmentAPI({ ...this.form, pid: this.data.id })
            this.$message.success('增加部门成功')
          } else {
            await alertdepartmentAPI(this.form)
            this.$message.success('部门更新成功')
          }
          // 成功后 清空表单数据
          this.form = {}
          // 关闭对话框
          this.dialogFormVisible = false
          this.$bus.$emit('updataFn')
        } else {
          return ''
        }
      })
    },
    cancelFn() { // 取消事件
    // 清除数据
      this.form = {}
      // 取消
      this.$refs.form.resetFields()
      // 关闭对话框层
      this.dialogFormVisible = false
    }
  }
}
</script>

<style>
</style>
